<template>
	<view class="conter">
		<view class="inputBody">
			<view class="">请输入标题</view>
			<input type="text" value="请输入标题" v-model="form.title" class="input-title"/>
			<view class="">
				<view class="">请输入内容</view>
				<textarea  type="text" value="请输入内容" v-model="form.body" class="input height" maxlength="2000" auto-height="true"/>
			</view>
			<button type="default" size="mini" @tap="save()">提交</button>
		</view>

		<!-- 建议列表 -->
		 <mescroll-body ref="mescrollRef" @init="mescrollInit":down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
		<view v-for="(item,index) in dataList" :key="index">
			<view class="tables">
				<van-row>
				  <van-col span="8"><span class="nickName">{{item.nickName}}</span> <image :src=item.avatar class="tipsimg"/></van-col>
				  <van-col span="8">{{item.data}}</van-col>
				  <van-col span="8">{{item.status}}</van-col>
				</van-row>
				<view class="body">{{item.title}}</view>
				<view class="body">{{item.body}}</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {saveIdeas,getIdeas} from '../../api/work/study.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				pageNum: 1, // 页码
				pageSize: 10, // 页长				
				downOption:{
					autoShowLoading: true, // 显示下拉刷新的进度条
					textColor: "#FF8095" // 下拉刷新的文本颜色
				},	
				upOption:{
					auto: false,
					page:{
						num:1,
						size:10
					}
				},
				queryParams: {
				  pageNum: 1,
				  pageSize: 10
				},
				dataList: [],
				form:{
					title:'',
					body:'',
					date:'',
					status:''
				},
				dataList:[{
					title:'测试',
					body:'测试',
					data:'2022-10-02',
					status:'已完成',
					nickName:'管理员'
				}],
				
			};
		},
		methods:{
			downCallback() {
				this.queryParams={
					pageNum: 1,
					pageSize: 10
				}
				getIdeas(this.queryParams.pageNum,this.queryParams.pageSize).then(resp=>{
					// this.mescroll.endSuccess();
					if(resp.code =='200'){
						console.log(this.queryParams.pageNum)
						console.log(resp.rows.length)
						this.dataList = resp.rows
						this.mescroll.endSuccess(resp.rows.length);
					}
				})
			},			
			upCallback() {
				getIdeas(this.queryParams.pageNum,this.queryParams.pageSize).then(resp=>{
					console.log(this.queryParams.pageNum)
					console.log(resp.rows.length)
					if(resp.code =='200'){
						this.dataList = [...this.dataList,...resp.rows]
						this.mescroll.endByPage(resp.rows.length, resp.total);
						if(resp.rows.length == this.queryParams.pageSize){
							this.queryParams.pageNum++
							}else{
								this.mescroll.endSuccess();
							}
						}
				})
				},
			save(){
				saveIdeas(this.form).then(resp=>{
					this.form = {
						title:'',
						body:'',
						date:'',
						status:''}
				})
			},
		}
	}
</script>

<style lang="scss">
.conter{
	text-align: center;
	margin-top: 10rpx;
}
.input-title{
	border: 1px solid lightgray;
	margin: 5rpx;
	margin-left: 70rpx;
	width: 600rpx;
	background-color: white;
}
.input{
	border: 1px solid lightgray;
	margin: 5rpx;
	background-color: white;
}
.height{
	margin-left: 70rpx;
}
.tables{
	margin-top: 35rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	border: 1px solid lightgrey;
	background-color: lightyellow;
	padding: 3rpx;
	.body{
		margin-top: 15rpx;
	}
}
.inputBody{
	border: 1px solid black;
	margin: 10rpx;
}
.tipsimg {
	height: 30rpx;
	width: 30rpx;
	margin-right: 10rpx;
}
.nickName {
	overflow: hidden;
}
</style>
